iT邦幫忙

2024 iThome 鐵人賽

DAY 26
0
IT 管理

前端工程師&UI 的30天約會:教會猴子用Figma!系列 第 26

[Day26] 25. FigJam 基本操作(二):協作工具 - 上篇

  • 分享至 

  • xImage
  •  

FigJam 的提供了一系列功能強大的編輯工具,共有四個分類:
https://ithelp.ithome.com.tw/upload/images/20241008/20166746zLGBc13R7G.png
(由左至右介紹 A - D)

A. 移動/手形

Select tool 和 Hand tool:選擇工具和手形工具,用法等同於 Figma 的移動和手形工具

B. 畫筆/便利貼/圖表

https://ithelp.ithome.com.tw/upload/images/20241008/20166746xbjxOt9Ujh.png
包含畫筆、Sticker Note、Diagrams,點選後分別會展開其對應的功能選項

https://ithelp.ithome.com.tw/upload/images/20241008/20166746853OEJpqRE.png

  1. 畫筆工具:預設為 Marker 馬克筆,還有 highlighter 螢光筆、Washi tape 紙膠帶和 Eraser 板擦,可以選擇筆刷大小和顏色。比較好玩的是紙膠帶功能!除了內建的圖案外還可以上傳喜歡的圖片製作專屬的紙膠帶花色。

https://ithelp.ithome.com.tw/upload/images/20241008/20166746ThaRnxXchP.png
2. Sticker Note:自由挑選不同顏色的便利貼,還有文字樣式、插入連結等選項。

https://ithelp.ithome.com.tw/upload/images/20241008/20166746QOXazlPqua.png
3. 圖表:提供線條箭頭工具和圖形工具,圖形有 Basic 基本、 Flowchart 流程圖以及 Misc 雜項三種分類可選,也可自行調整文字、方向、大小、顏色等。

在產品進入開發階段前,設計師除了出設計圖外,常常也需要提供流程圖、檢核規則或是操作邏輯等輔助圖表供前端工程師參考,而前端工程師在交付開發時也需要驗測產品的功能與使用流程是否合乎需求,這時候便可善用這些工具來快速產出流程腳本或測試地圖。有興趣了解 FigJam 的實際應用場景可以參考[Day15-開發前期] 進擊的 User Flow 💪 搭配「服務藍圖」解碼前台操作與業務流程!

那 C 和 D 兩類我們就留到下篇再詳細介紹!我們明天見!


上一篇
[Day25] 24. FigJam 基本操作(一)
下一篇
[Day27] 26. FigJam 基本操作(三):協作工具 - 中篇
系列文
前端工程師&UI 的30天約會:教會猴子用Figma!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言